import { Button, message, Radio, Tag } from 'antd'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import React, { useEffect, useRef, useState } from 'react'
import { useHistory } from 'react-router'
import { Camera, Desktop, Microphone } from 'src/components/action_bar'
import ErrorCode from 'src/lib/error-code'
import TRTCCloud, { ENUM_EVENT } from 'src/lib/srtc-electron-sdk'

dayjs.extend(duration)

interface ScreenItemType {
  iconBGRA: { width: number; height: number; length: number; buffer: ArrayBuffer }
  isMinimizeWindow: false
  sourceId: string
  sourceName: string
  thumbBGRA: { width: number; height: number; length: number; buffer: ArrayBuffer }
  type: number
}

const userConfig = {
  live_user_id: 'b0f8dd9553723cd80c07f73d3f863541',
  room_id: 358,
  app_id: 1400537727,
  user_sig:
    'eJw1jk0LgkAYhP-LXgt73XU-EjoYQiReIo3oVvtRb5YsJiFF-z3ROs7MM8O8SZFvA9t5bCyJmQCA6WA9bUNiQgMgo36Y6ug9GhKHEQBnUlI5Jmhs3aLDoXACp4yZ8x6gTBsFGqSTzDCnBONR*F-Dcw-zdXY9KFjVy1udbybWNlmqsbKU626WeFGmxcvt7GWflItfscV7-zMUNKJcCSE-X7RmNwc_',
  stream_id: '138822_78e0f17a4a83746aeb565e2fb755346c'
}

const trtcCloud = new TRTCCloud({ appId: userConfig.app_id, userSig: userConfig.user_sig, userId: userConfig.live_user_id })
export default function LiveTeacher() {
  const [screenList, setScreenList] = useState<ScreenItemType[]>([])
  const REFLiveStartDayjs = useRef<number>(0)
  const [liveStartDayjs, setLiveStartDayjs] = useState<string>('')
  const [shareScreen, setShareScreen] = useState<ScreenItemType>()
  /** 是否在直播中 */
  const [isLiveIng, setIsLiveIng] = useState(false)
  /** 摄像头是否开启 */
  const [isCamera, setIsCamera] = useState(false)
  /** 桌面分享是否开启 */
  const [isDesktop, setIsDesktop] = useState(false)
  /** 麦克风是否开启 */
  const [isMicrophone, setIsMicrophone] = useState(false)

  const REFCamera = useRef<HTMLDivElement>(null)
  const REFDesktop = useRef<HTMLDivElement>(null)
  const history = useHistory()

  useEffect(() => {
    /** 开启麦克风 */
    const REMOTE_AUDIO_ADD = () => {
      setIsMicrophone(true)
      console.log('开启麦克风')
    }
    /** 关闭麦克风 */
    const REMOTE_AUDIO_REMOVE = () => {
      setIsMicrophone(false)
      console.log('关闭麦克风')
    }
    /** 开启屏幕分享 */
    const SCREEN_SHARE_ADD = () => {
      setIsDesktop(true)
      console.log('开启屏幕分享')
    }
    /** 关闭屏幕分享 */
    const SCREEN_SHARE_REMOVE = () => {
      setIsDesktop(false)
      console.log('关闭屏幕分享')
    }
    /** 开启摄像头 */
    const REMOTE_VIDEO_ADD = () => {
      setIsCamera(true)
    }
    /** 关闭摄像头 */
    const REMOTE_VIDEO_REMOVE = () => {
      setIsCamera(false)
    }

    const ERROR = ({ errcode, errmsg }: { errcode: number; errmsg: string }) => {
      const codeToMessage = ErrorCode[`${errcode}`]
      if (codeToMessage) return message.error(codeToMessage)
      return message.error(`errcode = ${errcode}; errmsg = ${errmsg}`)
    }

    trtcCloud.on(ENUM_EVENT.REMOTE_AUDIO_ADD, REMOTE_AUDIO_ADD)
    trtcCloud.on(ENUM_EVENT.REMOTE_AUDIO_REMOVE, REMOTE_AUDIO_REMOVE)

    trtcCloud.on(ENUM_EVENT.SCREEN_SHARE_ADD, SCREEN_SHARE_ADD)
    trtcCloud.on(ENUM_EVENT.SCREEN_SHARE_REMOVE, SCREEN_SHARE_REMOVE)

    trtcCloud.on(ENUM_EVENT.REMOTE_VIDEO_ADD, REMOTE_VIDEO_ADD)
    trtcCloud.on(ENUM_EVENT.REMOTE_VIDEO_REMOVE, REMOTE_VIDEO_REMOVE)
    trtcCloud.on(ENUM_EVENT.ERROR, ERROR)

    return () => {
      trtcCloud.off(ENUM_EVENT.REMOTE_AUDIO_ADD, REMOTE_AUDIO_ADD)
      trtcCloud.off(ENUM_EVENT.REMOTE_AUDIO_REMOVE, REMOTE_AUDIO_REMOVE)

      trtcCloud.off(ENUM_EVENT.SCREEN_SHARE_ADD, SCREEN_SHARE_ADD)
      trtcCloud.off(ENUM_EVENT.SCREEN_SHARE_REMOVE, SCREEN_SHARE_REMOVE)

      trtcCloud.off(ENUM_EVENT.REMOTE_VIDEO_ADD, REMOTE_VIDEO_ADD)
      trtcCloud.off(ENUM_EVENT.REMOTE_VIDEO_REMOVE, REMOTE_VIDEO_REMOVE)

      trtcCloud.on(ENUM_EVENT.ERROR, ERROR)
    }
  }, [])

  useEffect(() => {
    return () => {
      exitRoom()
    }
  }, [])

  useEffect(() => {
    if (!REFLiveStartDayjs || !REFLiveStartDayjs.current) return
    const timer = setInterval(() => {
      setLiveStartDayjs(dayjs.duration(Date.now() - REFLiveStartDayjs.current).format('HH小时mm分钟ss秒'))
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  }, [REFLiveStartDayjs.current])
  const enterRoom = () => {
    trtcCloud.enterRoom({
      classId: 358,
      /** 昵称 */
      nickName: '谢老师',
      /** 头像地址 */
      avatar: ''
    })
    setIsLiveIng(true)
    REFLiveStartDayjs.current = Date.now()
    /**
     * 2.5 设置云端的混流转码参数
     *
     * 如果您在实时音视频 [控制台](https://console.cloud.tencent.com/trtc/) 中的功能配置页开启了“启动自动旁路直播”功能，
     * 房间里的每一路画面都会有一个默认的直播 [CDN 地址](https://cloud.tencent.com/document/product/647/16826)。
     *
     * 一个直播间中可能有不止一位主播，而且每个主播都有自己的画面和声音，但对于 CDN 观众来说，他们只需要一路直播流，
     * 所以您需要将多路音视频流混成一路标准的直播流，这就需要混流转码。
     *
     * 当您调用 setMixTranscodingConfig() 接口时，SDK 会向腾讯云的转码服务器发送一条指令，目的是将房间里的多路音视频流混合为一路,
     * 您可以通过 mixUsers 参数来调整每一路画面的位置，以及是否只混合声音，也可以通过 videoWidth、videoHeight、videoBitrate 等参数控制混合音视频流的编码参数。
     *
     * <pre>
     * 【画面1】=> 解码 ====> \
     *                         \
     * 【画面2】=> 解码 =>  画面混合 => 编码 => 【混合后的画面】
     *                         /
     * 【画面3】=> 解码 ====> /
     *
     * 【声音1】=> 解码 ====> \
     *                         \
     * 【声音2】=> 解码 =>  声音混合 => 编码 => 【混合后的声音】
     *                         /
     * 【声音3】=> 解码 ====> /
     * </pre>
     *
     * 参考文档：[云端混流转码](https://cloud.tencent.com/document/product/647/16827)。
     *
     * @note 关于云端混流的注意事项：
     *  - 云端转码会引入一定的 CDN 观看延时，大概会增加1 - 2秒。
     *  - 调用该函数的用户，会将连麦中的多路画面混合到自己当前这路画面中。
     *
     * @param {TRTCTranscodingConfig} config - 请参考 trtc_define.js 中关于 TRTCTranscodingConfig 的介绍, 如果传入 null 取消云端混流转码。
     * @param {TRTCTranscodingConfigMode} config.mode - 转码 config 模式
     * @param {Number} config.appId - 腾讯云直播 AppID
     * @param {Number} config.bizId - 腾讯云直播 bizid
     * @param {Number} config.videoWidth   - 最终转码后的视频分辨率的宽度（px）
     * @param {Number} config.videoHeight  - 最终转码后的视频分辨率的高度（px）
     * @param {Number} config.videoBitrate - 最终转码后的视频分辨率的码率（kbps）
     * @param {Number} config.videoFramerate  - 最终转码后的视频分辨率的帧率（FPS）
     * @param {Number} config.videoGOP        - 最终转码后的视频分辨率的关键帧间隔（也被称为 GOP），单位秒
     * @param {Number} config.audioSampleRate - 最终转码后的音频采样率
     * @param {Number} config.audioBitrate    - 最终转码后的音频码率，单位：kbps
     * @param {Number} config.audioChannels   - 最终转码后的音频声道数
     * @param {String} config.backgroundColor   - 混合后画面的底色颜色，格式为十六进制数字，比如：“0x61B9F1” 代表 RGB 分别为(97,158,241)
     * @param {String} config.backgroundImage   - 混合后画面的背景图
     * @param {String} config.streamId          - 输出到 CDN 上的直播流 ID
     * @param {TRTCMixUser[]} config.mixUsersArray - 每一路子画面的位置信息
     * @param {String}  config.mixUsersArray[].userId      - 参与混流的 userId
     * @param {String}  config.mixUsersArray[].roomId      - 参与混流的 roomId，跨房流传入的实际 roomId，当前房间流传入 roomId = null
     * @param {Rect}  config.mixUsersArray[].rect        - 图层位置坐标以及大小，左上角为坐标原点(0,0) （绝对像素值）
     * @param {Number}  config.mixUsersArray[].rect.left   - 图层位置的左坐标
     * @param {Number}  config.mixUsersArray[].rect.top    - 图层位置的上坐标
     * @param {Number}  config.mixUsersArray[].rect.right  - 图层位置的右坐标
     * @param {Number}  config.mixUsersArray[].rect.bottom - 图层位置的下坐标
     * @param {Number}  config.mixUsersArray[].zOrder      - 图层层次（1 - 15）不可重复
     * @param {Boolean} config.mixUsersArray[].pureAudio   - 是否纯音频
     * @param {TRTCVideoStreamType} config.mixUsersArray[].streamType  - TRTCVideoStreamTypeBig：主路画面，一般用于摄像头；TRTCVideoStreamTypeSub：辅路画面，一般用于屏幕分享。
     */
    // const param = new TRTCTranscodingConfig()
    // param.mode = TRTCTranscodingConfigMode.TRTCTranscodingConfigMode_Template_ScreenSharing
    // param.appId = userConfig.app_id
    // param.streamId = userConfig.stream_id
    // param.audioSampleRate = 48000
    // param.audioBitrate = 64
    // param.audioChannels = 2
    // param.videoWidth = 0
    // param.videoHeight = 0
    // param.videoBitrate = 0
    // param.videoFramerate = 15
    // param.videoGOP = 3
    // trtcCloud.rtcCloud.setMixTranscodingConfig(param)

    // setLocalVideoRenderCallback	设置本地视频自定义渲染。

    // setRemoteVideoRenderCallback	设置远端视频自定义渲染。

    // setLocalVideoRenderCallback() 和 setRemoteVideoRenderCallback() 接口自绘到当前屏幕上。

    // trtcCloud.rtcCloud.setRemoteVideoRenderCallback

    /** 开始向 cdn 推流 辅流推流 指定推流 */
    // TRTCVideoStreamType.TRTCVideoStreamTypeBig 推摄像头
    // TRTCVideoStreamType.TRTCVideoStreamTypeSub 推屏幕分享
    // TRTCVideoStreamType.TRTCVideoStreamTypeSmall 推主流
    // trtcCloud.rtcCloud.startPublishing(userConfig.stream_id, TRTCVideoStreamType.TRTCVideoStreamTypeSub)
    // setLiveLongTime
  }
  const exitRoom = () => {
    // setLiveLongTime('')
    setIsLiveIng(false)
    trtcCloud.exitRoom()
    // trtcCloud.rtcCloud.stopPublishing()
    /** 停止向 cdn 推流 */
  }
  return (
    <div style={{ width: '100vw', height: '100vh', display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, display: 'flex' }}>
        <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', overflow: 'hidden' }} ref={REFDesktop}>
          {(screenList.length && !shareScreen && (
            <Radio.Group
              onChange={(e) => {
                setShareScreen(screenList.find((d) => d.sourceId === e.target.value))
              }}
              style={{ display: 'flex', flexWrap: 'wrap' }}
            >
              <p>请选择要分享的桌面或者窗口</p>
            </Radio.Group>
          )) ||
            '桌面分享显示区域'}
        </div>
        <div style={{ width: '320px', height: '100%', display: 'flex', flexDirection: 'column' }}>
          <div style={{ height: '180px', display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: '#ccc' }} ref={REFCamera}>
            头像显示区域
          </div>
          <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: '#ddd' }}>IM 显示区域</div>
        </div>
      </div>
      <div style={{ height: '88px', backgroundColor: '#ececec', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <div style={{ display: 'flex' }}>
          <Microphone open={isMicrophone} trtc={trtcCloud} />
          <Camera open={isCamera} trtc={trtcCloud} view={REFCamera} />
          <Desktop open={isDesktop} trtc={trtcCloud} view={REFDesktop} />
        </div>
        <div style={{ paddingLeft: '120px' }}>
          {isLiveIng ? (
            <Button
              type="primary"
              onClick={() => {
                exitRoom()
              }}
            >
              结束直播
            </Button>
          ) : (
            <Button
              type="primary"
              onClick={() => {
                enterRoom()
              }}
            >
              开始直播
            </Button>
          )}

          <span style={{ width: '16px', display: 'inline-block', height: '1px' }}></span>
          {(liveStartDayjs && <Tag color="cyan">直播时长： {liveStartDayjs}</Tag>) || null}
          <Tag color="cyan" onClick={() => history.push('/login')}>
            退出登录
          </Tag>
        </div>
      </div>
    </div>
  )
}
